<template>
	<view class="p-bot30" :style="{ '--color': color }">
		<navBar title="卡券兑换" bgColor="transparent"></navBar>
		<Exchange @updataData="getMyOfflineCard"></Exchange>

		<view class="list" v-for="(item, index) in pageData" :key="index">
			<view class="flex-1 d-flex f-column" @click="toUrl(`cardDetails?id=${item.card_id}`)">
				<text class="CDKEY">{{ item.log_order_code }}</text>
				<text class="Date">{{ item.log_expired_time }}</text>
			</view>
			<text class="color size30 bold">兑换成功</text>
			<view class="theme-Tips Tips">{{ item.type_name }}</view>
		</view>

		<emptys empty="coupon" title="暂无相关记录" v-if="!pageData.length"></emptys>
		<u-popup :show="show" @close="show = false" :safeAreaInsetBottom="false" mode="center" :round="10">
			<Successful @Close="show = false"></Successful>
		</u-popup>

		<view class="switchover" @click="$rectTo(`cardBags`)">
			<view class="iconfont icon-qiehuan size40 white bold"></view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import Successful from '@/subCard/components/Successful.vue';
import Exchange from '@/subCard/components/Exchange.vue';
export default {
	components: {
		Successful,
		Exchange
	},
	data() {
		return {
			show: false,
			pageData: []
		};
	},
	onShow() {
		this.getMyOfflineCard();
	},
	methods: {
		getMyOfflineCard() {
			this.$http
				.post({
					url: '/TimeCardApi/getMyOfflineCard'
				})
				.then((res) => {
					if (res.code != 200) return this.$Toast(res.msg);
					const result = res.data || [];
					this.pageData = result;
				});
		}
	},
	computed: {
		...mapState(['color'])
	}
};
</script>
<style>
page {
	background-color: #f2f2f2;
}
</style>
<style lang="scss" scoped>
.exchange {
	width: 690rpx;
	padding: 50rpx 30rpx;
	background-color: #ffffff;
	margin: 40rpx auto;
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;

	&-Input {
		flex: 1;
		height: 80rpx;
		background-color: #f2f2f2;
		padding: 0 14rpx;
		border-radius: 10rpx;
		color: black;
		font-size: 30rpx;
	}

	.icon-saoyisao {
		padding: 0 0 0 40rpx;
	}

	.NowBtn {
		width: 100%;
		height: 90rpx;
		background-color: var(--color);
		color: #ffffff;
		font-size: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 45rpx;
		margin-top: 36rpx;
	}
}

.list {
	width: 690rpx;
	background-color: #ffffff;
	padding: 36rpx 30rpx;
	border-radius: 20rpx;
	margin: 24rpx auto;
	position: relative;
	display: flex;
	align-items: center;

	.CDKEY {
		color: #000;
		font-size: 38rpx;
		font-weight: bold;
	}

	.Date {
		color: #999;
		font-size: 26rpx;
		margin-top: 8rpx;
	}

	.theme-Tips {
		position: absolute;
		right: 20rpx;
		top: 10rpx;
	}

	.Tips {
		padding: 2rpx 8rpx;
		background-color: var(--color);
		color: #fff;
		font-size: 22rpx;
		display: inline;
	}

	.oldDate {
		display: flex;
		flex-direction: column;
		text-align: right;

		text {
			color: #999999;
			font-size: 26rpx;
		}
	}
}

.switchover {
	width: 70rpx;
	height: 70rpx;
	background-color: var(--color);
	border-radius: 50%;
	position: fixed;
	bottom: 100rpx;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
